<template>
	<div class="wdxq1" :style="{'min-height':Height-50+'px'}">
		<div class="wdxq_title flex align_center">
			<i class="el-icon-arrow-left" style="float: left;margin-left: 4%;font-size: 2.4rem;" @click="fh"></i>
			<span class="flex1">实名认证</span>
			<i class="el-icon-arrow-left" style="float: right;margin-right: 4%;font-size: 2.4rem;opacity: 0;"></i>
		</div>
		<img style="width: 100%;display: block;" src="../../../../static/img/images/sfrz1.jpg" />
		<div class="wdxq_div flex " style="padding: 1rem 5%;">
			<p class="wdxq_div7p1">真实姓名：</p>
			<input v-model="Name" type="text" placeholder="请输入姓名" class="flex1 wdxq_div7input" />
		</div>
		<div class="wdxq_div flex" style="border-width: 0.5rem;padding: 1rem 5%;">
			<p class="wdxq_div7p1">身份证号：</p>
			<input v-model="member_coder" type="number" placeholder="请输入身份证号码" class="flex1 wdxq_div7input" />
		</div>
		<div class="wdxq_div clear2">
			<label class="wdxq_div7imgl" for="img1" :style="{'height':imgh+'px'}">
				<img :src="img1list"  />
				<input id='img1' type="file" @change="img1c" style="display: none;" />
			</label>
			<div class="wdxq_div7imgr">
				<img src="../../../../static/img/images/sfrz3.jpg" ref='imgheight' />
			</div>
		</div>
		<div class="wdxq_div clear2" style="border-width: 0;">
			<label class="wdxq_div7imgl" for="img2" :style="{'height':imgh+'px'}">
				<img :src="img2list"  />
				<input id='img2' type="file" @change="img2c" style="display: none;" />
			</label>
			<div class="wdxq_div7imgr">
				<img src="../../../../static/img/images/sfrz5.jpg" />
			</div>
		</div>
		<div class="wdxq_div" style="border-width: 0;">
			<el-button round style='color: #fff;background: #ff4242;width: 100%;font-size: 1.5rem;' @click='setUserIDCode'>提交</el-button>
		</div>
		<div class="wdxq_div8">
			<p class="wdxq_div8p1">为什么要上传证件照片？</p>
			<p class="wdxq_div8p2">穆穆是一个真实高品质穆斯林婚恋交友平台，既然你希望对方真诚实意，那么就需要你跟对方一样，进行严格的身份认证。手持身份证进行认证，可以最大程度的防止冒充他人的行为。</p>
		</div>
		<div class="wdxq_div8">
			<p class="wdxq_div8p1">郑重承诺</p>
			<p class="wdxq_div8p2">此功能仅用于核实你的网络真实身份，为网络交友提供安全保障，其他用户无权查看。穆穆采取先进的加密技术，请放心认证。</p>
		</div>
		
		

	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	export default {
		data: function() {
			return {
				img1list:'../../../../static/img/images/sfrz2.jpg',
				img2list:'../../../../static/img/images/sfrz4.jpg',
				Height:0,
				tabI:0,
				imgh:0,
				div3list:[{
					'name':'微信认证 ',
					'botter':false,
					'index':1,
					'img':'../../../../static/img/images/rzzx2.jpg',
					
				},{
					'name':'手机认证',
					'botter':false,
					'index':1,
					'img':'../../../../static/img/images/rzzx3.jpg'
				},{
					'name':'实名认证 ',
					'botter':false,
					'index':1,
					'img':'../../../../static/img/images/rzzx4.jpg'
				}],
				Name:'',
				member_coder:'',
				imgtpShow1:true,
				imgtpShow2:true,

			}
		},
		mounted() {
			this.Height=document.body.offsetHeight;
			setTimeout(()=>{
				this.imgh=this.$refs.imgheight.offsetHeight;
			},500)
		},
		methods: {
			img1c(){
				let fileObj = document.getElementById("img1").files[0]; // 获取文件对象
	            let form = new FormData();
	            form.append("uid", window.uid);  
	            form.append("img_file", fileObj);// 文件对象
	            this.$http.post(this.defines.uploadMemberImg, form, {
						emulateJSON: true
					})
					.then(
						(data) => {
							this.img1list=data.data.data.img_list[0].img_url_s;
							this.imgtpShow1=false;
						},
						(error) => {
							console.log(error);
						}
					);

			},
			img2c(){
				let fileObj = document.getElementById("img2").files[0]; // 获取文件对象
	            let form = new FormData();
	            form.append("uid", window.uid);  
	            form.append("img_file", fileObj);// 文件对象
	            this.$http.post(this.defines.uploadMemberImg, form, {
						emulateJSON: true
					})
					.then(
						(data) => {
							this.img2list=data.data.data.img_list[0].img_url_s;
							this.imgtpShow2=false;
						},
						(error) => {
							console.log(error);
						}
					);

			},
			setUserIDCode(){
				if(this.Name.trim()==''){
					Toast('请输入名字');
					return false;
					
				}
				if(this.member_coder.trim()==''){
					Toast('请输入身份证号');
					return false;
					
				}
				if(this.imgtpShow&&this.imgtpShow){
					Toast('上传身份证图片');
					return false;
					
				}
				
				
				
				this.$http.post(this.defines.setUserIDCode, {
					uid:window.uid,
					name:this.Name,
					member_coder:this.member_coder,
					member_img_z:this.img1list,
					member_img_f:this.img2list
				}, {
						emulateJSON: true
					})
					.then(
						(data) => {
							if(data.data.success){
								Toast('提交成功');
								this.fh();
							}
							else{
								Toast(data.data.errmsg);
							}
						},
						(error) => {
							console.log(error);
						}
					);
			},
			fh(){
        		window.history.go(-1);
        	},
		}
	}
</script>
